<template>
  <div class="alarmLog-waterMark">
  <div class="alarmLog-container">
    <div class="seachBox">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="报警名称：" class="taglong">
          <el-input v-model="formInline.alarmName" placeholder="请输入报警名称"></el-input>
        </el-form-item>
        <el-form-item label="报警设备：" class="taglong">
          <el-input v-model="formInline.deviceId" placeholder="请输入设备编号"></el-input>
        </el-form-item>
        <!-- <el-form-item label="状态：" class="tagSearch">
          <el-input v-model="formInline.tags" placeholder="请输入"></el-input>
        </el-form-item> -->
        <el-form-item label="时间：" class="tagSearch" >
          <el-date-picker
            v-model="timeVal"
            :clearable="false"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <div class="searchBut" @click="onSubmit()"><i class="iconfont icon-sousuo"></i> 搜索</div>
      </el-form>
    </div>
    <div class="contBox">
      <div :class="{'item': true, 'itemLev': item.level == 1}" v-for="(item,index) in tableData" :key="index">
        <div :class="{'lab': true, 'nofsLab': index == 0, 'nolsLab': index == tableData.length-1}"><span></span></div>
        <div class="itemInfo">
          <div><i class="el-icon-alarm-clock"></i> {{item.ts ? parseTime(item.ts) : '--'}}</div>
          <div style="text-align: left;padding-left: 160px;">
            <svg-icon icon-class="alarm"/>
            <span>{{item.alarmName}}</span>
            <span v-if="item.level == 1" class="labLev">一般</span>
            <span v-if="item.level == 2" class="labLev">严重</span>
            </div>
          <div style="text-align: left;padding-left: 160px;"><svg-icon icon-class="threshold"/> {{item.quotaName}} <span class="unit">{{item.stringValue}}</span><span class="unit">{{item.unit}}</span> </div>
          <div><svg-icon icon-class="equipment"/> {{item.deviceId}}</div>
        </div>
      </div>
      <div class="noData" v-if="total <= 0">
          <img src="../../../assets/nodata.png" alt="" width="129">
      </div>
    </div>

    <pagination
      v-show="total>10"
      :total="total"
      :page.sync="formInline.pageNum"
      :limit.sync="formInline.pageSize"
      @pagination="init" />
    </div>
  </div>

</template>

<script>
import Table from "@/components/iot/Table/index.vue";
import { getAlarmLog } from "@/api/iot/alarmManage";
import moment from 'moment'
import { parseTime } from '@/utils/ruoyi';
export default {
  name: "alarmLog",
  components: {
    Table,
  },
  data() {
    return {
      formInline: {
        pageSize: 10,
        page:1,
        alarmName: ''
      },
      timeVal : [new Date(), new Date()],
      tableData : [],
      total : 0,

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
        deptId: undefined
      },
    }
  },
  methods: {

    init() {
      const params = {...this.formInline}
      params.start =moment(this.timeVal[0]).format('YYYY-MM-DD 00:00:00')
      params.end =moment(this.timeVal[1]).format('YYYY-MM-DD 23:59:59')
      getAlarmLog({...params}).then((res) => {
        console.log(res)
        this.tableData = res.rows
        this.total = res.total
        this.loading = false;
      }).catch(err => {
        console.log(err)
      })
    },

    onSubmit(refId) {
      this.formInline.page = 1
      this.init()
    },

    resetForm(refId) {
     this.$refs[refId].resetFields();
    },

    handleClick(row) {
      console.log(row);
    },

    handleSizeChange(val) {
      this.formInline.pageSize = val
      this.init()
    },
    handleCurrentChange(val) {
      this.formInline.page = val
      this.init()
    }
  },
  mounted(){
    this.init()
  }

}
</script>


<style lang="scss">
.alarmLog{
   &-container{
     .el-form--inline .el-form-item{
       width: 270px;
     }
     .tagSearch{
       width: 415px !important;
     }
     .taglong .el-form-item__content{
       width: calc(100% - 85px) !important;
     }
     .el-range-separator{
       width: 20px;
     }
   }
}
</style>
<style lang="scss" scoped>
.alarmLog-waterMark{
      height: 100%;
      background: #f3f4f7;
    }
.alarmLog{
  &-container{
    height: calc(100vh);
    padding: 28px 35px;
    .seachBox{
      padding-left: 10px;
      margin-top: 20px;
      .searchBut{
        display: inline-block;
        position: relative;
        width: 89px;
        cursor: pointer;
        height: 36px;
        line-height: 38px;
        text-align: center;
        background: #ffffff;
        border: 1px solid #5584ff;
        border-radius: 4px;
        color: #5584ff;
      }
    }

    .contBox{
       .item{
         height: 58px;
         margin-left: 44px;
         position: relative;
         display: flex;
         align-items: center;
         .itemInfo{
            text-align: center;
            flex: 1;
            background: #fff;
            height: 44px;
            line-height: 44px;
            // margin: 7px 0;
            display: flex;
            justify-content: center;
            color: #20232a;
            font-size: 14px;
            div{
              flex:1;
            }
            .iconfont{
              color:#afb6ca;
              margin-right: 10px;
              font-size: 14px;
            }
            .labLev{
              display: inline-block;
              position: relative;
              padding: 2px 5px;
              margin-left: 10px;
              background: #FF5757;
              color:#fff;
              line-height: 12px;
              font-size: 12px;
              border-radius: 3px;
              &::before{
                content: '';
                display: inline-block;
                width: 6px;
                height: 6px;
                position: absolute;
                transform:translateY(-50%) rotate(45deg);
                left: -3px;
                top: 50%;
                background: #FF5757;
              }
            }
            .unit{
              color: #FF5757;
            }
         }
         .lab{
            position: absolute;
            left: -44px;
            height: 58px;
            span{
              position: relative;
              top:50%;
              transform: translateY(-50%);
              display: inline-block;
              width: 15px !important;
              height: 15px;
              border-radius: 100px;
              border:solid 2px #FF5757;
              background: #fff;
              z-index: 5;
            }
            &::before{
              content: '';
              position: absolute;
              display: inline-block;
              width: 0px;
              height: 29px;
              border:solid 1px #cfdcf6;
              top:0px;
              left:50%;
              transform: translateX(-50%);
              z-index: 1;
            }
            &::after{
              content: '';
              position: absolute;
              bottom:0px;
              display: inline-block;
              width: 0px;
              height: 29px;
              border:solid 1px #cfdcf6;
              left:50%;
              transform: translateX(-50%);
              z-index: 1;
            }
         }
         .nofsLab{
           &::before{
              display: none;
            }
         }
         .nolsLab{
           &::after{
              display: none;
            }
         }
         .itemInfo::before{
           content: '';
           display: inline-block;
           width: 10px;
           height: 10px;
           position: relative;
           transform:translateY(-50%) rotate(32deg) skew(-30deg, 0deg);
           left: -5px;
           top: 50%;
           background: #fff;
         }
         &:hover{
           .lab{
             span{
              background-color: #FF5757;
              // background-image: radial-gradient(20 40, #fff 30%, #f00 40%) !important;
             }
           }
           .itemInfo{
             transition: 500ms ease;
             transform: scale(1.02, 1.1);
           }
         }
       }
       .itemLev{
         .itemInfo{
            .labLev{
              background: #FFC400;
              &::before{
                background: #FFC400;
              }
            }
            .unit{
              color: #FFC400;
            }
         }
          .lab{
            span{
              border:solid 2px #FFC400;
            }
          }
          &:hover{
           .lab{
             span{
              background-color: #FFC400;
              // background-image: radial-gradient(20 40, #fff 30%, #f00 40%) !important;
             }
           }
         }
       }
    }
    .pagination-container{
      background: transparent;
    }
  }
}
</style>

